import 'dart:math' as math;

import 'package:flutter/material.dart';

import 'HeroDialogRoute.dart';
import 'TextAvatarContainer.dart';

class UserAction extends StatefulWidget {
  @override
  _UserActionState createState() => new _UserActionState();
}

class _UserActionState extends State<UserAction> {
  ActionButton actionButton;
  TextAvatarContainer tweetAvatar;
  TextAvatarContainer blogAvatar;
  TextAvatarContainer articleAvatar;

  void tweetTapHandler() {
    print("tweetHandler");
  }

  void blogTapHandler() {
    print("blogTapHandler");
  }

  void articleTapHandler() {
    print("articleTapHandler");
  }

  @override
  Widget build(BuildContext context) {
    EdgeInsets tweetEdge = new EdgeInsets.only(
        left: 0.0,
        top: 0.0,
        right: MediaQuery.of(context).size.width / 2,
        bottom: 80.0);
    tweetAvatar = new TextAvatarContainer(
        56.0,
        "发动弹",
        new Icon(
          Icons.wifi_tethering,
          color: Colors.white,
          size: 28.0,
        ),
        new Color(0xFFFF4B55),
        tweetEdge,
        this.tweetTapHandler);

    EdgeInsets blogEdge = new EdgeInsets.only(bottom: 120.0);
    blogAvatar = new TextAvatarContainer(
        56.0,
        "写博客",
        new Icon(
          Icons.description,
          color: Colors.white,
          size: 28.0,
        ),
        new Color(0xFF07BBEE),
        blogEdge,
        this.blogTapHandler);

    EdgeInsets articleEdge = new EdgeInsets.only(
        left: MediaQuery.of(context).size.width / 2,
        top: 0.0,
        right: 0.0,
        bottom: 80.0);
    articleAvatar = new TextAvatarContainer(
        72.0,
        "投递文章",
        new Icon(
          Icons.receipt,
          color: Colors.white,
          size: 28.0,
        ),
        new Color(0xFFF0BB37),
        articleEdge,
        this.articleTapHandler);

    actionButton = new ActionButton();
    Color color = Theme.of(context).primaryColor;
    Icon icon = new Icon(Icons.add_circle, size: 48.0, color: color);
    return new GestureDetector(
      onTap: () {
        addPopup();
      },
      child: icon,
    );
  }

  void playAllAnimation() {
    tweetAvatar.getState().switchAnimation();
    blogAvatar.getState().switchAnimation();
    articleAvatar.getState().switchAnimation();
    actionButton.getState().switchAnimation();
  }

  void addPopup() {
    HeroDialogRoute heroDialogRoute = new HeroDialogRoute(
      builder: (BuildContext context) {
        Container container = new Container(
          color: Colors.black54,
          padding: new EdgeInsets.all(8.0),
          child: new Stack(
            children: <Widget>[
              tweetAvatar,
              blogAvatar,
              articleAvatar,
              new Container(
                alignment: Alignment.bottomCenter,
                child: actionButton,
              )
            ],
          ),
        );

        GestureDetector gd = new GestureDetector(
          onTap: () {
            //play all animation
            playAllAnimation();
          },
          child: container,
        );
        return gd;
      },
    );

    Navigator.push(
      context,
      heroDialogRoute,
    );
  }
}

class ActionButton extends StatefulWidget {
  ActionButtonState actionButtonState;

  @override
  State<StatefulWidget> createState() {
    actionButtonState = new ActionButtonState();
    return actionButtonState;
  }

  ActionButtonState getState() {
    return actionButtonState;
  }
}

class ActionButtonState extends State<ActionButton>
    with SingleTickerProviderStateMixin {
  Animation<double> animation;
  AnimationController controller;
  bool _opened = false;
  double begin = 0.0;
  double end = 135.0;

  ActionButtonState();

  switchAnimation() {
    setState(() {
      if (!_opened) {
        controller.forward();
      } else {
        controller.reverse();
      }

      _opened = !_opened;
    });
  }

  @override
  initState() {
    super.initState();
    controller = new AnimationController(
        duration: new Duration(milliseconds: 300), vsync: this);
    animation = new Tween(begin: begin, end: end).animate(controller)
      ..addListener(() {
        setState(() {
          // listen to the animation object’s value
          if (animation.value == begin) {
            //close popup after animation switch back the begin state
            if (Navigator.of(context).canPop()) {
              Navigator.of(context).pop();
            }
          }
        });
      });

    //start animation after popup opened
    switchAnimation();
  }

  dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    Color color = Theme.of(context).primaryColor;
    Icon icon = new Icon(Icons.add_circle, size: 48.0, color: color);
    final Matrix4 transform =
        new Matrix4.rotationZ(animation.value / 360 * math.pi * 2.0);
    Transform tf = new Transform(
      transform: transform,
      alignment: FractionalOffset.center,
      child: icon,
    );

    //this stack just to add the white background color
    Stack stack = new Stack(
      alignment: AlignmentDirectional.center,
      children: <Widget>[
        new Container(
          width: 22.0,
          height: 22.0,
          color: Colors.white,
        ),
        tf
      ],
    );

    return stack;
  }
}
